// 总调用函数
window.onload = function () {
    header();
    timeBack();
    bannerEffect();
}
/*头部的js效果*/
function header() {
    var banner = document.querySelector(".jd_banner");
    var bannerHeight = banner.offsetHeight;
    var search = document.querySelector(".jd_search");
    window.onscroll = function () {
        var offsetTop = document.documentElement.scrollTop || document.body.scrollTop;
        var opacity = 0;
        if (offsetTop < bannerHeight) {
            opacity = offsetTop / bannerHeight;
            search.style.backgroundColor = "rgba(233,35,34," + opacity + ")";
        }
    }
}
/*倒计时效果*/
function timeBack() {
    // 先获取时间所有的span
    var spans = document.querySelector(".jd_ms_time").querySelectorAll("span")

    // 设置初始时间
    var totalTime = 3700;
    demo();
    var timerId = setInterval(demo, 1000);

    function demo() {
        totalTime--;
        if (totalTime < 0) {
            clearInterval(timerId);
            return;
        }
        var h = Math.floor(totalTime / 3600);
        var m = Math.floor(totalTime % 3600 / 60);
        var s = Math.floor(totalTime % 60);
        spans[0].innerHTML = Math.floor(h / 10);
        spans[1].innerHTML = Math.floor(h % 10);

        spans[3].innerHTML = Math.floor(m / 10);
        spans[4].innerHTML = Math.floor(m % 10);

        spans[6].innerHTML = Math.floor(s / 10);
        spans[7].innerHTML = Math.floor(s % 10);
    }
}
/*轮播图*/
function bannerEffect() {
    var banner = document.querySelector(".jd_banner");
    var imgBox = banner.querySelector("ul:first-of-type");
    //获取原始第一张图片
    var first = imgBox.querySelector("li:first-of-type");
    // 获取原始第二张图片
    var last = imgBox.querySelector("li:last-of-type");
    // 在收尾分别插入两张图片
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);

    // 设置插入的图片的样式
    var lis = imgBox.querySelectorAll("li");
    var count = lis.length;
    var bannerWidth = banner.offsetWidth;
    imgBox.style.width = count * bannerWidth + "px";
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.width = bannerWidth + "px";
    }
    imgBox.style.left = -bannerWidth + "px";

    //当屏幕变化的时候。重新计算宽度
    window.onresize = function () {
        /*4.1.获取banner的宽度,覆盖全局的宽度值*/
        bannerWidth = banner.offsetWidth; //  370
        /*4.2 设置图片盒子的宽度*/
        imgBox.style.width = count * bannerWidth + "px";
        /*4.3设置每一个li(图片)元素的宽度*/
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + "px";
        }
        /*4.4重新设置定位值*/
        imgBox.style.left = -bannerWidth + "px"; 
    }
    var index = 1;
    /*5.实现自动轮播*/
    setInterval(function () {
        /*5.1 变换索引*/
        index++;
        /*5.2.添加过渡效果*/
        imgBox.style.transition = "left 0.5s ease-in-out";
        /*5.3 设置偏移*/
        imgBox.style.left = (-index * bannerWidth) + "px"; //   0.5s
        /*5.4 判断是否到最后一张，如果是则*/
        setTimeout(function () {
            if (index == count - 1) {
                // console.log(index);
                index = 1;
                /*如果一个元素的某个属性之前添加过过渡效果，那么过渡属性会一直存在，如果不想要，则需要清除过渡效果*/
                /*关闭过渡效果*/
                imgBox.style.transition = "none";
                /*偏移到指定的位置*/
                imgBox.style.left = (-index * bannerWidth) + "px";
            }
        }, 500);
    }, 2000);

}